<!--- 上传 --->
<template>
    <el-dialog v-model="uploadVisible" title="上传附件" width="30%" :before-close="handleClose">
        <div class="wx-upload-dialog">
            <el-upload ref="uploadRef" multiple drag v-model:file-list="fileList" :auto-upload="false"
                :on-change="fileChange" :on-exceed="handleExceed" :before-remove="handleRemove">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

                <template #tip>
                    <!-- <div class="el-upload__tip">提示：仅支持.eml 文件</div> -->
                </template>
            </el-upload>
        </div>

        <div style="text-align: center">
            <el-button type="primary" class="btn-primary" @click="submit" :loading="loading">提交</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import { importApi } from "@/plugins/api/system/user";

let ruleForm = ref({});

//弹窗
let uploadVisible = ref(false);
function handleClose() {
    uploadVisible.value = false;
}
//上传超出时
function handleExceed(files, uploadFiles) {
    ElMessage.warning("文件最多上传1个！");
}
// 文件删除时
function handleRemove() { }

// 上传成功时的钩子函数
function fileChange(file, fileArr) {
    // const FILE_NAME = file.name;
    // if (FILE_NAME.substring(FILE_NAME.lastIndexOf(".")) !== ".eml") {
    //   ElMessage.warning("仅支持.eml文件");
    //   fileList.value.forEach((item, i) => {
    //     if (item.uid == file.raw.uid) {
    //       fileList.value.splice(i, 1);
    //     }
    //   });
    //   return false;
    // }
}
let loading = ref(false);
let fileList = ref([]);
let ruleFormRef = ref(null);
const emit = defineEmits(["updateList"]);
function submit() {
    if (fileList.value.length == 0) {
        ElMessage.warning("请上传文件！");
        return;
    }

    loading.value = true;
    let params = new FormData();

    fileList.value.forEach((element) => {
        params.append("file", element.raw);
    });

    importApi(params)
        .then((data) => {
            ElMessage.success("上传成功！");
            fileList.value = [];
            emit("updateList");
            loading.value = false;
            uploadVisible.value = false;
        })
        .catch(() => {
            loading.value = false;
        });
}
function initFun() {
    fileList.value = [];

    loading.value = false;
    uploadVisible.value = true;
}
function closeBtn() {
    uploadVisible.value = true;
}
defineExpose({
    initFun,
});
onMounted(() => { });
</script>
<style scoped lang="scss">
.wx-upload-dialog {
    overflow: hidden;

    :deep(.el-form-item) {
        width: calc(50% - 10px);
        margin-right: 0px;
    }

    :deep(.el-upload-dragger) {
        padding: 20px 0 !important;
        // background: #0b3f67 !important;
    }

    .el-upload__text {
        // color: white;
        margin-bottom: 10px;
    }

    .el-upload__tip {
        font-size: 12px;
        font-weight: 400;
        color: #b3cedd;
        text-align: center;
    }

    .btnSupect :deep(.el-form-item__content) {
        justify-content: right;
    }
}
</style>
  